<!DOCTYPE html>
<html>
<head>
    <title>学生信息查询</title>
    <meta charset="UTF-8">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<h2>学生信息查询</h2>
<form id="addStudentForm">
    <label>姓名：<input type="text" name="name"></label>
    <label>学号：<input type="text" name="number"></label>
    <input type="submit" value="添加">
</form>
<table border="1">
    <thead>
    <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>学号</th>
        <th>操作</th>
        <th>修改</th>
    </tr>
    </thead>
    <tbody id="studentTable">
    </tbody>
</table>


<!-- 模态框 -->
<div id="editStudentModal" class="modal">
    <div class="modal-content">
        <span class="close">&times;</span>
        <h3>修改学生信息</h3>
        <form id="editStudentForm">
            <label>姓名：<input type="text" name="name"></label>
            <label>学号：<input type="text" name="number"></label>
            <input type="submit" value="修改">
        </form>
    </div>
</div>

<script>

    $("#editStudentModal").css("display", "none");
    // 编辑学生信息
    function editStudent(id) {
        // 弹出模态框
        var modal = $("#editStudentModal");
        modal.css("display", "block");

        // 根据ID查询学生信息
        $.ajax({
            url: "/api/students/" + id,
            type: "GET",
            dataType: "json",
            success: function(data) {
                if (data) {
                    // 填充表单数据
                    $("input[name='name']").val(data.name);
                    $("input[name='number']").val(data.number);

                    // 提交修改表单
                    $("#editStudentForm").submit(function(event) {
                        event.preventDefault();
                        var name = $("input[name='name']").val();
                        var number = $("input[name='number']").val();
                        $.ajax({
                            url: "/api/students/" + id,
                            type: "PUT",
                            dataType: "json",
                            data: JSON.stringify({"name": name, "number": number}),
                            contentType: "application/json",
                            success: function() {
                                alert("修改学生信息成功");
                                queryStudents();
                                modal.css("display", "none");
                            },
                            error: function(xhr, status, error) {
                                alert("修改学生信息失败：" + error);
                            }
                        });
                    });
                }
            },
            error: function(xhr, status, error) {
                alert("查询学生信息失败：" + error);
            }
        });
    }

    // 关闭模态框
    $(".close").click(function() {
        var modal = $("#editStudentModal");
        modal.css("display", "none");
    });

    // // 修改学生信息
    // function editStudent(id) {
    //     var name = prompt("请输入新的姓名：");
    //     var number = prompt("请输入新的学号：");
    //     if (name && number) {
    //         $.ajax({
    //             url: "/api/students/" + id,
    //             type: "PUT",
    //             dataType: "json",
    //             data: JSON.stringify({"name": name, "number": number}),
    //             contentType: "application/json",
    //             success: function() {
    //                 alert("修改学生信息成功");
    //                 queryStudents();
    //             },
    //             error: function(xhr, status, error) {
    //                 alert("修改学生信息失败：" + error);
    //             }
    //         });
    //     }
    // }


    // 查询学生信息
    function queryStudents() {
        $.ajax({
            url: "/api/students",
            type: "GET",
            dataType: "json",
            success: function(data) {
                if (data) {
                    var studentTable = $("#studentTable");
                    studentTable.empty();
                    $.each(data, function(index, student) {
                        var deleteButton = "<button type='button' onclick='deleteStudent(" + student.id + ")'>删除</button>";
                        var editButton = "<button type='button' onclick='editStudent(" + student.id + ")'>修改</button>";
                        studentTable.append("<tr><td>" + student.id + "</td><td>" + student.name + "</td><td>" + student.number + "</td><td>" + deleteButton + "</td><td>" + editButton + "</td></tr>");
                    });
                }
            },
            error: function(xhr, status, error) {
                alert("查询学生信息失败：" + error);
            }
        });
    }


    // 添加学生信息
    $("#addStudentForm").submit(function(event) {
        event.preventDefault();
        var name = $("input[name='name']").val();
        var number = $("input[name='number']").val();
        $.ajax({
            url: "/api/students",
            type: "POST",
            dataType: "json",
            data: JSON.stringify({"name": name, "number": number}),
            contentType: "application/json",
            success: function() {
                alert("添加学生信息成功");
                queryStudents();
                $("#addStudentForm")[0].reset();
            },
            error: function(xhr, status, error) {
                alert("添加学生信息失败：" + error);
            }
        });
    });

    // 删除学生信息
    function deleteStudent(id) {
        $.ajax({
            url: "/api/students/" + id,
            type: "DELETE",
            dataType: "json",
            success: function() {
                alert("删除学生信息成功");
                queryStudents();
            },
            error: function(xhr, status, error) {
                alert("删除学生信息失败：" + error);
            }
        });
    }
    //只要打开页面就执行
    $(function() {
        queryStudents();
    });

</script>
</body>
</html>
